import {CnMediumSpan} from '@/components/text'
import { defineComponent, reactive, watch, onMounted } from 'vue'

const EvaluationStep = defineComponent({
  name: 'EvaluationStep',
  props: {
    target: {
      type: Number,
      required: true
    },
    actived: Number
  },
  emits: {
    'update:actived': (data: number): boolean => true
  },
  setup(props, {emit, slots}) {
    function handleClick() {
      emit('update:actived', props.target)
    }
    return () => (
      <div class='flex items-center cursor-pointer' onClick={handleClick}>
        <div
          class={[
            'w-20 h-20  border-1 rounded-full flex items-center justify-center mr-8',
            (props.actived || 0) === props.target
              ? 'bg-primary  border-primary'
              : ' border-infoHalf'
          ]}
        >
          <CnMediumSpan class={['h-auto', props.actived === props.target ? 'text-white' : '']}>
            {props.target}
          </CnMediumSpan>
        </div>
        <CnMediumSpan class='text-16'>{slots.default?.()}</CnMediumSpan>
      </div>
    )
  }
})

const EvaluationSteps = defineComponent({
  name: 'EvaluationSteps',
  props: {
    actived: {
      type: Number,
      default: 1
    }
  },
  emits: {
    'update:actived': (data: number): boolean => true
  },
  setup(props, {emit, slots}) {
    let state = reactive<{actived: number}>({
      actived: 1
    })

    /**监听步骤变化时，将步骤返回给父组件 */
    watch(
      () => state.actived,
      n => {
        emit('update:actived', n)
      }
    )

    onMounted(() => {
      state.actived = props.actived
    })
    return () => (
      <div class='w-full h-full flex items-center justify-center gap-x-32'>
        <EvaluationStep target={1} v-model={[state.actived, 'actived']}>
          基础信息
        </EvaluationStep>
        <EvaluationStep target={2} v-model={[state.actived, 'actived']}>
          模板指标
        </EvaluationStep>
        <EvaluationStep target={3} v-model={[state.actived, 'actived']}>
          考评流程
        </EvaluationStep>
      </div>
    )
  }
})
export default EvaluationSteps
